<template>
    <div class="all">
        <div class="top">
            <div class="biaoti"><br/>四川省第三次全国土地调查专业技术培训成绩查询</div>
        </div>
        <div v-show="query">
            <div class="center">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
                    <el-form-item  prop="subject">
                        <el-tooltip content="考试科目" placement="bottom-start" effect="light">
                            <el-input v-model="ruleForm.subject" disabled placeholder="考试科目"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item prop="name">
                        <el-tooltip content="姓名" placement="bottom-start" effect="light">
                            <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item  prop="idcard">
                        <el-tooltip content="身份证号码" placement="bottom-start" effect="light">
                        <el-input v-model="ruleForm.idcard" placeholder="身份证号码"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%">点击查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div v-show="!query">
            <table>
                <tr>
                    <th>考试科目：</th>
                    <td>{{subject}}</td>
                </tr>

                <tr>
                    <th>考生姓名</th>
                    <td>{{name}}</td>
                </tr>

                <tr>
                    <th>身份证号码：</th>
                    <td>{{idcard}}</td>
                </tr>

                <tr>
                    <th>所在单位：</th>
                    <td>{{company}}</td>
                </tr>

                <tr>
                    <th>考试成绩：</th>
                    <td>{{grade}}</td>
                </tr>

                <tr>
                    <th>考试时间：</th>
                    <td>{{testtime}}</td>
                </tr>

                <tr>
                    <th>考试说明：</th>
                    <td>{{remarks}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                company:'',
                name: '',
                subject:'',
                idcard:'',
                grade:'',
                testtime:'',
                remarks:'',
                query:true,
                ruleForm: {
                    name: '',
                    subject:'四川省第三次全国土地调查专业技术培训',
                    idcard:''
                },
                rules: {
                    subject: [
                        { required: true, message: '请输入考试科目', trigger: 'blur' },
                    ],
                    idcard: [
                        { required: true, message: '请输入身份证号码', trigger: 'blur' },
                        // { min: 18, max: 18, message: '长度为18个字符', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                }
            };
        },
        created(){
            this.getInformation()
        },
        methods: {
            getInformation(){
                this.$axios.get('/text/achievement/querybyid'
                ).then((res)=>{
                    if(res.data.code==200)
                    {
                        this.query=false;
                        this.company=res.data.data.data[0].company;
                        this.name=res.data.data.data[0].name;
                        this.subject=res.data.data.data[0].subject;
                        this.idcard=res.data.data.data[0].idcard;
                        this.grade=res.data.data.data[0].grade;
                        this.testtime=res.data.data.data[0].testtime;
                        this.remarks=res.data.data.data[0].remarks;

                    }
                    else
                        this.query=true;
                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                       this.$axios.get('/text/achievement/querybyid?'+
                           'subject='+this.ruleForm.subject+
                           '&name='+this.ruleForm.name+
                           '&idcard='+this.ruleForm.idcard
                       ).then((res)=>{
                            if(res.data.code==200)
                            {
                                this.query=false;
                                console.log(res.data.data.data[0].company);
                                this.company=res.data.data.data[0].company;
                                this.name=res.data.data.data[0].name;
                                this.subject=res.data.data.data[0].subject;
                                this.idcard=res.data.data.data[0].idcard;
                                this.grade=res.data.data.data[0].grade;
                                this.testtime=res.data.data.data[0].testtime;
                                this.remarks=res.data.data.data[0].remarks;
                            }
                            else{
                                this.$message.error('未查到相关信息！！');
                            }
                       })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>
    @media (max-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            width: 100%;
            height: 50px;
            background: linear-gradient(to right,#0f2027,#203a43,#2c5364);
            margin-bottom: 40px
        }
        .biaoti{
           color: white;
            text-align: center;
            margin-left: 10px;
        }
        .center{
            width: 80%;
            text-align: center;
            margin: 0 auto;
            margin-top: 20px
        }
        table{
            width: 80%;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
    }
    @media (min-width: 700px){
        .all{
            text-align: center;
            margin: 0;
            padding: 0px;
        }
        .top{
            margin: 0 auto;
            width: 70%;
            height: 100px;
            border-bottom: 2px solid #5e7382;

        }
        .center{
            width: 500px;
            text-align: center;
            margin: 0 auto;
            margin-top: 30px
        }
        .biaoti{
            text-align: center;
            font-size: 24px;
        }
        table{
            width: 500px;
            text-align: center;
            padding:10px;
            /*border: 1px solid #5e7382;*/
            margin: 0 auto;
            /*border-radius: 5px;*/
            margin-top: 30px
        }
        td{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
        th{
            border: 1px solid #5e7382;
            width: 200px;
            height: 40px;
            border-radius: 5px;
        }
    }
</style>
